<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>早晚的事er-后台登录页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--    导入bs-->
    <link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
</head>

<body>
<div class="main_wrap">
    <div class="header">
        <a href="#" class="logo"><img src="images/logo.png" alt=""></a>
        <div class="copyright">CopyRight © 2020 哈尔滨布卡科技网络有限公司<br>All Rights Reserved</div>
    </div>

    <div class="login_form_con">
        <div class="login_title"></div>
        <form class="login_form">
            <i class="iconfont icon-user"></i>
            <i class="iconfont icon-key"></i>
            <input type="text" class="input_txt" placeholder="邮箱/手机号">
            <input type="password" class="input_pass" placeholder="密码">
            <input type="submit" class="input_sub" value="登 录">
        </form>
    </div>

</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">提示框</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">狠心关闭</button>
                <button type="button" class="btn btn-primary">残忍确认</button>
            </div>
        </div>
    </div>
</div>
</body>
<!--导入jq-->
<script src="./js/jquery-1.12.4.min.js"></script>

<script src="./js/bootstrap/js/bootstrap.min.js"></script>

<script>
  /*
  用户登录
  1.为登陆按钮绑定点击事件
  2.获取用户名和密码
      1.去空格
      2.非空判断
      3.为空  提示
      4.不为空 继续执行
  3.ajax调用登录接口
      1.成功
          去首页
      2.失败
          提示用户
   */

  $(function () {
    $('.input_sub').click(function (e) {
      //阻止默认行为
      e.preventDefault()
      var user_name = $('.input_txt').val().trim()
      var password = $('.input_pass').val().trim()
      console.log(user_name, password)

      if (user_name == '' || password == '') {
        $('.modal-body').text('用户名或密码为空!长点心吧!')
        $('#myModal').modal()
        return
      }
      //ajax
      $.ajax({
        url: 'http://localhost:8000/admin/login',
        type: 'post',
        data: {
          user_name: user_name,
          password: password
        },
        success: function (backData) {
          console.log(backData)
          if (backData.code === 200) {
            //BOM
            window.location.href = './index.html'
          }else{
            //用户名或密码错误
            $('.modal-body').text('用户名或密码错误!长点心吧!')
            $('#myModal').modal()
          }
        }
      })
    })
  })
</script>
</html>













